import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Breadcrumb, Row, Col, Input, Form, Button, Table, Modal, Select, message, Popconfirm } from 'antd';
// import * as XLSX from "xlsx";
// import { saveAs } from '@progress/kendo-file-saver';
// import { useForm } from '_antd@4.14.0@antd/lib/form/Form';

const ShouFeiBiaoZhunZiLiaoWeiHu = () => {
    const [selectionType, setSelectionType] = useState('checkbox');
    const [total, settotal] = useState([]);
    const [data, setdata] = useState([]);
    const [page, setpage] = useState(1);
    const [option, setoption] = useState([]);
    const [option1, setoption1] = useState([]);
    const [shoufeiBiaoZhunLeiXing, setshouFeiBiaoZhunLeiXing] = useState("");
    const [shoufeiLeiXingMingCheng, setshouFeiLeiXingMingCheng] = useState("");
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isModalVisible1, setIsModalVisible1] = useState(false);
    const [isModalVisible2, setIsModalVisible2] = useState(false);
    const [dataId, setdataId] = useState("");

    const [form2] = Form.useForm()
    const [form1] = Form.useForm()
    const [form] = Form.useForm()

    const layout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 16 },
    };
    const paginationProps = {
        page: page,
        onChange: (page) => {
            axios("/shouFeiBiaoZhunBiao/chaXunFenYe", {
                method: "GET",
                // headers: { "content-Type": "application/json" },
                params: {
                    page: page,
                    shouFeiBiaoZhunLeiXing: shoufeiBiaoZhunLeiXing,
                    shouFeiLeiXingMingCheng: shoufeiLeiXingMingCheng
                }
            })
                .then(res => {
                    console.log(res);
                    if (res.data.code === 200) {
                        let temp = []
                        for (let i = 0; i < res.data.data.length; i++) {
                            // let obj = {}
                            res.data.data[i].key = i + 1
                            res.data.data[i].shoufeibiaozhun = res.data.data[i].shouFeiBiaoZhuLeiXing.shouFeiBiaoZhunLeiXing
                            res.data.data[i].shoufeileixing = res.data.data[i].shouFeiLeiXing.shouFeiLeiXingMingCheng
                            // obj.value=res.data.data[i].shoufeileixing
                            // obj.label=res.data.data[i].shoufeileixing
                            // temp.push(obj)
                        }
                        temp = unique(temp)
                        setdata(res.data.data)
                        // setoption(temp)
                        settotal(res.data.count)
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },
        total: total,
        showQuickJumper: true,
        showTotal: (total, range) => `共${total}条数据`,
        position: ["bottomCenter"]
    }
    const columns = [
        {
            key: "key",
            title: '收费类型',
            dataIndex: 'shoufeileixing',
        },
        {
            key: "key",
            title: '收费名称',
            dataIndex: 'shouFeiMingCheng',
        },
        {
            key: "key",
            title: '单价',
            dataIndex: 'danJia',
        },
        {
            key: "key",
            title: '计量单位',
            dataIndex: 'jiLiangDanWei',
        },
        {
            key: "key",
            title: '收费标准',
            dataIndex: 'shoufeibiaozhun',
        },
        {
            title: '操作',
            dataIndex: 'caozuo',
            render: (text, record) => <div>
                <Button onClick={() => { showModal1(record) }}>修改</Button>
                <Button onClick={() => { showModal(record) }} style={{ margin: "0 10px" }}>查看</Button>
                <Button onClick={() => { shanchu(record) }}>删除</Button>
            </div>,
        },
    ]
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };
    //新增
    const xingzen = (values) => {
        console.log(values);
        let str = ""
        for (let i = 0; i < option1.length; i++) {
            for (let key in option1[i]) {
                if (option1[i][key] === values.name1) {
                    str = option1[i].label
                }
            }
        }
        let obj = {
            "danJia": values.name3,
            "id": "",
            "jiLiangDanWei": values.name4,
            "shouFeiBiaoZhuLeiXing": {
                "id": values.shoufeileixing,
                "shouFeiBiaoZhunLeiXing": "",
            },
            "shouFeiBiaoZhunLeiXingId": values.shoufeileixing,
            "shouFeiLeiXing": {
                "id": "",
                "menZhenShouFeiBiaoZhun": "",
                "shouFeiLeiXingDaiHao": "",
                "shouFeiLeiXingMingCheng": values.name2,
                "zhuYuanShouFeiBiaoZhun": ""
            },
            "shouFeiLeiXingDaiHaoId": values.name1,
            "shouFeiMingCheng": str
        }
        axios("/shouFeiBiaoZhunBiao/xinZeng", {
            method: "POST",
            headers: { "content-Type": "application/json" },
            data: JSON.stringify(obj)
        })
            .then(res => {
                if (res.data.code === 500) {
                    message.info(res.data.msg);
                }
            })
            .catch(err => {
                console.log(err);
            })
        getData()
        setIsModalVisible2(false);

    }
    const showModal2 = () => {
        form2.setFieldsValue({
            danJia: "",
            jiLiangDanWei: "",
            shouFeiMingCheng: "",
            shoufeibiaozhun: "",
            shoufeileixing: "",
        })
        setIsModalVisible2(true);
    };
    const handleCancel2 = () => {
        setIsModalVisible2(false);
    };
    //修改
    const xiugai = (values) => {
        console.log(values);
        let data = {
            "danJia": values.danJia,
            "id": dataId,
            "jiLiangDanWei": values.jiLiangDanWei,
            "shouFeiBiaoZhuLeiXing": {
                "id": "",
                "shouFeiBiaoZhunLeiXing": values.shoufeibiaozhun
            },
            "shouFeiBiaoZhunLeiXingId": "",
            "shouFeiLeiXing": {
                "id": "",
                "menZhenShouFeiBiaoZhun": "",
                "shouFeiLeiXingDaiHao": "string",
                "shouFeiLeiXingMingCheng": values.shoufeileixing,
                "zhuYuanShouFeiBiaoZhun": ""
            },
            "shouFeiLeiXingDaiHaoId": "",
            "shouFeiMingCheng": values.shouFeiMingCheng
        }
        axios("/shouFeiBiaoZhunBiao/gengXinById", {
            method: "POST",
            headers: { "content-Type": "application/json" },
            data: data
        })
            .then(res => {
                console.log(res);
                if (res.data.code === 200) {
                    message.info(res.data.msg);
                    getData()
                }
            })
            .catch(err => {
                console.log(err);
            })
        setIsModalVisible1(false);
    }
    const showModal1 = (record) => {
        console.log(record);
        form1.setFieldsValue(record)
        setIsModalVisible1(true);
        setdataId(record.id)
    };
    const handleCancel1 = () => {
        setIsModalVisible1(false);
    };
    //查看
    const showModal = (record) => {
        console.log(record);
        form.setFieldsValue(record)
        setIsModalVisible(true);

    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //删除
    const shanchu = (record) => {
        console.log(record);
        axios("/shouFeiBiaoZhunBiao/shanChuById", {
            method: "POST",
            headers: { "content-Type": "application/json" },
            params: { id: record.id }
        })
            .then(res => {
                console.log(res);
                if (res.data.code === 200) {
                    message.info(res.data.msg);
                    getData()
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
    //查询
    const chaxun = () => {
        // let arr=[]
        // arr=option
        getData()
        // let timer = setInterval(function () {
        //     setoption(arr)
        // }, 10);

    }
    const optionbiaozhun = (e) => {
        axios("/shouFeiBiaoZhuLeiXing/chaXunAll", {
            method: "GET",
            headers: { "content-Type": "application/json" },

        })
            .then(res => {
                console.log(res);
                if (res.data.code === 200) {
                    let temp = []
                    for (let i = 0; i < res.data.list.length; i++) {
                        let obj = {}
                        res.data.list[i].key = i + 1
                        obj.value = res.data.list[i].id
                        obj.label = res.data.list[i].shouFeiBiaoZhunLeiXing
                        temp.push(obj)
                    }
                    // temp = unique(temp)
                    setoption(temp)
                }
            })
            .catch(err => {
                console.log(err);
            })
        // console.log(shoufeiBiaoZhunLeiXing, shoufeiLeiXingMingCheng);
    }
    const optionbiaozhun1 = (e) => {
        axios("/shouFeiBiaoZhuLeiXing/chaXunAll", {
            method: "GET",
            headers: { "content-Type": "application/json" },

        })
            .then(res => {
                console.log(res);
                if (res.data.code === 200) {
                    let temp = []
                    for (let i = 0; i < res.data.list.length; i++) {
                        let obj = {}
                        res.data.list[i].key = i + 1
                        obj.value = res.data.list[i].id
                        obj.label = res.data.list[i].shouFeiBiaoZhunLeiXing
                        temp.push(obj)
                    }
                    // temp = unique(temp)
                    setoption(temp)
                }
            })
            .catch(err => {
                console.log(err);
            })
        // console.log(shoufeiBiaoZhunLeiXing, shoufeiLeiXingMingCheng);
    }
    const optionleixing = (e) => {
        axios("/shouFeiLeiXing/chaXunAll", {
            method: "GET",
            headers: { "content-Type": "application/json" },

        })
            .then(res => {
                console.log(res);
                if (res.data.code === 200) {
                    let temp = []
                    for (let i = 0; i < res.data.list.length; i++) {
                        let obj = {}
                        res.data.list[i].key = i + 1
                        obj.value = res.data.list[i].shouFeiLeiXingDaiHao
                        obj.label = res.data.list[i].shouFeiLeiXingMingCheng
                        temp.push(obj)
                    }
                    // temp = unique(temp)
                    setoption1(temp)
                }
            })
            .catch(err => {
                console.log(err);
            })
    }

    //导出
    const daochu = () => {
        axios("/shouFeiBiaoZhunBiao/xiaZai", {
            method: "GET",
            headers: { "content-Type": "application/json" },

        })
            .then(res => {
                console.log(res);
                window.location.href("http://172.17.3.206:10013/shouFeiBiaoZhunBiao/xiaZai")
            })
            .catch(err => {
                console.log(err);
            })
    };

   
    //数组去重
    function unique(arr) {
        let unique = {};
        arr.forEach(function (item) {
            unique[JSON.stringify(item)] = item;//键名不会重复
        })
        arr = Object.keys(unique).map(function (u) {
            //Object.keys()返回对象的所有键值组成的数组，map方法是一个遍历方法，返回遍历结果组成的数组.将unique对象的键名还原成对象数组
            return JSON.parse(u);
        })
        return arr;
    };

    //获取数据
    const getData = () => {
        axios("/shouFeiBiaoZhunBiao/chaXunFenYe", {
            method: "GET",
            // headers: { "content-Type": "application/json" },
            params: {
                page: page,
                shouFeiBiaoZhunLeiXing: shoufeiBiaoZhunLeiXing,
                shouFeiLeiXingMingCheng: shoufeiLeiXingMingCheng
            }
        })
            .then(res => {
                console.log(res);
                if (res.data.code === 200) {
                    let temp = []
                    for (let i = 0; i < res.data.data.length; i++) {
                        // let obj = {}
                        res.data.data[i].key = i + 1
                        res.data.data[i].shoufeibiaozhun = res.data.data[i].shouFeiBiaoZhuLeiXing.shouFeiBiaoZhunLeiXing
                        res.data.data[i].shoufeileixing = res.data.data[i].shouFeiLeiXing.shouFeiLeiXingMingCheng
                        // obj.value=res.data.data[i].shoufeileixing
                        // obj.label=res.data.data[i].shoufeileixing
                        // temp.push(obj)
                    }
                    temp = unique(temp)
                    setdata(res.data.data)
                    // setoption(temp)
                    settotal(res.data.count)
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
    useEffect(() => {
        getData()
    }, []);
    return (
        <>
            <Row>
                <Row>
                    <Breadcrumb style={{ marginBottom: 24 }}>
                        <Breadcrumb.Item>系统维护</Breadcrumb.Item>
                        <Breadcrumb.Item>收费标准资料维护</Breadcrumb.Item>
                    </Breadcrumb>
                </Row>
            </Row>
            <Row>
                <Col span="24">
                    <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 100 }}>
                        <Row>
                            <Col span="8">
                                <Form layout="inline">
                                    <Form.Item
                                        label="收费标准类型："
                                        name="shoufeileixing"
                                    >
                                        <Select options={option} onClick={optionbiaozhun} onChange={(e) => { setshouFeiBiaoZhunLeiXing(e) }} style={{ width: 150 }} allowClear></Select>
                                    </Form.Item>
                                    <Form.Item
                                        label="收费类型："
                                        name="name"
                                    >
                                        <Input onChange={(e) => { setshouFeiLeiXingMingCheng(e.target.value) }}></Input>
                                    </Form.Item>
                                </Form>
                            </Col>
                            <Col>
                                <Button type="primary" onClick={chaxun}>
                                    查询
                                </Button>
                                <Button type="primary" style={{ marginLeft: 50 }} onClick={showModal2}>
                                    新增
                                </Button>
                            </Col>
                        </Row>

                    </div>
                </Col>
            </Row>
            <Row>
                <Col span="24">
                    <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 300 }}>
                        <Row>
                            <Col span="2">
                                <Button onClick={daochu}>导出</Button>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="24">
                                <Table
                                    rowSelection={{
                                        type: selectionType,
                                        ...rowSelection,
                                    }}
                                    columns={columns}
                                    dataSource={data}
                                    pagination={paginationProps}
                                />
                            </Col>
                        </Row>

                    </div>
                </Col>
            </Row>
            <Modal title="新增："
                visible={isModalVisible2}
                onCancel={handleCancel2}
                width={600}
                footer
            >
                <Form {...layout} onFinish={xingzen} name="basic" form={form2} >
                    <Form.Item
                        label="收费类型："
                        name="shoufeileixing"
                    >
                        <Select options={option1} onClick={optionleixing} allowClear></Select>
                    </Form.Item>
                    <Form.Item
                        label="收费名称："
                        name="shouFeiMingCheng"
                    >
                        <Input id="name1" placeholder="输入收费名称"></Input>
                    </Form.Item>
                    <Form.Item
                        label="单价："
                        name="danJia"
                    >
                        <Input id="name1" placeholder="输入单价"></Input>
                    </Form.Item>
                    <Form.Item
                        label="单位："
                        name="jiLiangDanWei"
                    >
                        <Input id="name2" placeholder="输入单位" ></Input>
                    </Form.Item>
                    <Form.Item
                        label="收费标准类型："
                        name="shoufeibiaozhun"
                    >
                        <Select options={option} onClick={optionbiaozhun1} allowClear></Select>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{ width: "100px", marginLeft: "60%" }}>确定</Button>
                    </Form.Item>
                </Form>
            </Modal>
            <Modal title="修改："
                visible={isModalVisible1}
                onCancel={handleCancel1}
                width={600}
                footer
            >
                <Form {...layout} onFinish={xiugai} name="basic" form={form1}>
                    <Form.Item
                        label="收费类型："
                        name="shoufeileixing"
                    >
                        <Input disabled></Input>
                    </Form.Item>
                    <Form.Item
                        label="收费名称："
                        name="shouFeiMingCheng"
                    >
                        <Input disabled></Input>
                    </Form.Item>
                    <Form.Item
                        label="单价："
                        name="danJia"
                    >
                        <Input id="name1" placeholder="输入单价"></Input>
                    </Form.Item>
                    <Form.Item
                        label="单位："
                        name="jiLiangDanWei"
                    >
                        <Input id="name2" placeholder="输入单位" ></Input>
                    </Form.Item>
                    <Form.Item
                        label="收费标准类型："
                        name="shoufeibiaozhun"
                    >
                        <Input disabled></Input>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{ width: "100px", marginLeft: "60%" }}>确定</Button>
                    </Form.Item>
                </Form>
            </Modal>
            <Modal title="查看："
                visible={isModalVisible}
                onCancel={handleCancel}
                width={600}
                footer
            >
                <Form {...layout} onFinish={xiugai} name="basic" form={form}>
                    <Form.Item
                        label="收费类型："
                        name="shoufeileixing"
                    >
                        <Input disabled></Input>
                    </Form.Item>
                    <Form.Item
                        label="收费名称："
                        name="shouFeiMingCheng"
                    >
                        <Input disabled></Input>
                    </Form.Item>
                    <Form.Item
                        label="单价："
                        name="danJia"
                    >
                        <Input id="name1" placeholder="输入单价" disabled></Input>
                    </Form.Item>
                    <Form.Item
                        label="单位："
                        name="jiLiangDanWei"
                    >
                        <Input id="name2" placeholder="输入单位" disabled></Input>
                    </Form.Item>
                    <Form.Item
                        label="收费标准类型："
                        name="shoufeibiaozhun"
                    >
                        <Input disabled></Input>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{ width: "100px", marginLeft: "60%" }}>确定</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
}

export default ShouFeiBiaoZhunZiLiaoWeiHu;
